﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Screen.Master" Inherits="System.Web.Mvc.ViewPage<dbPoll_Application.ViewModels.ReportViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Comparative Chart
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <div id="contentContainer">

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">var webURL = false;</script>
    <script type="text/javascript" src="../../Scripts/PageControl.js"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', { 'packages': ['corechart'] });
    google.setOnLoadCallback(drawChart);

    // Build the array of data
    var dataArray = [];
    dataArray[0] = ['Answer', 'Previous Poll', 'Current Poll'];

    <% 
        int demoResponseCount = 0;
        int compareResponseCount = 0;
        
        // Get the total count of responses
        foreach (var response in Model.demoResponses) 
        { 
            demoResponseCount += response.Value;
        }
        
        // Get the total count of responses for the other question
        foreach (var response in Model.compareResponses) 
        { 
            compareResponseCount += response.Value;  
        }
        
        int i = 1;
        
        // Populate the array with the data
        foreach (var response in Model.demoResponses) 
        {
            
            %>
                
            dataArray[<%=i%>] = ["<%=response.Key%>", <%=response.Value%>/<%=demoResponseCount%>, <%=Model.compareResponses[response.Key]%>/<%=compareResponseCount%>];
                
            <%
            
        i++;
        
        }    
        
    %>

    function drawChart() {
        var data = google.visualization.arrayToDataTable(dataArray);
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        
        <% 
            int j = 0;

            // Set formatted value for each of the rows
            foreach (var response in Model.demoResponses)
            {
                %>
                data.setFormattedValue(<%=j%>, 1, "<%=response.Value%>"); 
                data.setFormattedValue(<%=j%>, 2, "<%=Model.compareResponses[response.Key]%>");
                <%
            j++;
            }    
        %>        
        
        chart.draw(data, {width: 100, height: 600,
                                colors: [<%=Model.chartColours%>],
                                vAxis: {title: "Percentage", format:'#%', minValue:0 } });     
    }

    </script>
    <div id="chartTitle"><h1><%= Model.text %></h1></div>
    <!--Div to hold the chart-->
    <div id="chart_div" align="center"></div>
    <input type="hidden" name="pollID" id="pollID" value="<%= ViewData["pollID"] %>" />
    </div>

</asp:Content>
